<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="shortcut icon" href="../images/yc.png" type="image/x-icon">
	<link rel="stylesheet" href="../css/layui.css"  media="all">
</head>
<body>
<br/>
<!-- 因为按钮用的是submit，submit默认会提交表单，所以要阻止默认的表单提交，这个时候要加上onsubmit="return false" -->
<form class="layui-form" id="myform" style="width:90%" onsubmit="return false">
	<div class="layui-form-item">
		<label class="layui-form-label">商品类型</label>
		<div class="layui-input-inline" style="width: 25%">
			<select lay-verify="required" id="tid" name="tno">
				<option value="">请选择商品类型</option>
			</select>
		</div>
		<label class="layui-form-label">商品名称</label>
		<div class="layui-input-inline">
			<input type="text" name="gname" lay-verify="title" lay-reqtext="商品名称不能为空..." autocomplete="off" placeholder="请输入商品名称" class="layui-input"  style="width: 300px;">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品价格</label>
		<div class="layui-input-inline" style="width: 25%">
			<input type="text" name="price" lay-verify="required" lay-reqtext="价格不能为空..." placeholder="请输入商品价格" autocomplete="off" class="layui-input" style="width: 200px;">
		</div>
		<label class="layui-form-label">商品库存</label>
		<div class="layui-input-inline"  style="width: 25%">
			<input type="number" name="balance" lay-verify="required|number" lay-reqtext="库存不能为空..." placeholder="请输入商品库存" autocomplete="off" class="layui-input" style="width: 200px;">
		</div>
		<label class="layui-form-label">商品单位</label>
		<div class="layui-input-inline">
			<input type="text" name="unit" lay-verify="required" lay-reqtext="商品单位不能为空..." placeholder="请输入商品单位" autocomplete="off" class="layui-input" style="width: 200px;">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">商品净重</label>
		<div class="layui-input-inline" style="width: 25%">
			<input type="text" name="weight" lay-verify="required" lay-reqtext="商品净重不能为空..." placeholder="请输入商品净重" autocomplete="off" class="layui-input" style="width: 200px;">
		</div>
		<label class="layui-form-label">保质期</label>
		<div class="layui-input-inline" style="width: 25%">
			<input type="text" name="qperied" lay-verify="required" lay-reqtext="商品保质期不能为空..." placeholder="请输入商品保质期" autocomplete="off" class="layui-input" style="width: 200px;">
		</div>
		<label class="layui-form-label">商品图片</label>
		<div class="layui-input-inline" style="width: 200px;">
			<input type="file" name="pics" id="pics" autocomplete="off" onchange="setImagePreviews(this, 'showpic')" multiple="multiple">
		</div>
	</div>
	<div class="layui-form-item" style="margin-left: 20px;" id="showpic" ></div>
	<div class="layui-form-item layui-form-text">
		<label class="layui-form-label">商品简介</label>
		<div class="layui-input-block">
			<textarea placeholder="请输入内容" class="layui-textarea" name="intro"></textarea>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">商品详细</label>
			<div class="layui-input-block">
				<textarea name="goods_form_descr" id="goods_form_descr" rows="10" cols="80"></textarea>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">
			<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>

<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/showpic.js" charset="utf-8"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../js/ajaxfileupload.js"></script>
<script>
	CKEDITOR.replace('goods_form_descr');
	layui.use(['form'], function(){
		var form = layui.form,
				layer = layui.layer;

		// 发送请求获取商品类型
		$.get("../../type/findAll", null, rt => {
			if(rt.code == 200) {
				let str = ""; // 拼接字符串
				$.each(rt.data, function(index, item) {
					str += "<option value='" + item.tno + "'>" + item.tname +"</option>"
				})
				$("#tid").append($(str)); // 将str转成对应的对象，这里是option对象
			}

			// 刷新组件
			form.render("select");
		}, "json");

		// 自定义验证规则
		form.verify({
			title: function(value){
				if(value.length < 2){
					return '商品名称至少得2个字符...';
				}
			}
		});

		// 监听提交
		form.on('submit(demo1)', function(data){
			// var obj = JSON.stringify(data.field);
			// console.info(obj)
			let obj = data.field;

			// 如何获取富文本编辑器中的值
			let descr = CKEDITOR.instances.goods_form_descr.getData();
			obj.descr = descr; // 将富文本编辑器中的内容赋值给obj对象中的descr属性

			// 发送异步请求到后台，问题 ajax、post、get都不能带文件
			$.ajaxFileUpload({
				url: "../../product/add",
				secureuri: false,
				fileElementId: "pics",  // 要发送文件的文本框id，如果有过个用数组
				data: obj,		// 要发送的数据
				dataType: "json",
				success: function(rt, status) {
					if(rt.code == 200) {
						$("#myform")[0].reset();	// 重置表单   $("#myform")[0]将jquery对象转成js对象
						$("#showpic").html('');		// 清空图片预览区域的内容
						CKEDITOR.instances.goods_form_descr.setData(""); // 清空富文本编辑器中的内容
						layui.form.render();
						layer.msg("添加成功...", {icon: 1});
						return;
					}
					layer.msg("添加失败...", {icon: 2});
					return;
				},
				error: function(rt, status, e) {
					layer.msg("添加失败...\n" + e, {icon: 2});
				}
			})
			return;
		});
	});
</script>
</body>
</html>